<template>
    <div>
        <Form :model="formDataDemo"><Input v-model="formDataDemo.name"></Input></Form>

        <Form ref="formValidate" :model="formData" :rules="validate">
            <h3>Form的model属性为表单域数据模型</h3>
            <h3>Form的rules属性为验证规则,注意这里是动态绑定</h3>
            <h3>prop属性为验证规则对应的属性</h3>
            <h3>prop必须与Form表单域属性一致</h3>
            <FormItem label="标题头" prop="name">
                <Input v-model="formData.name" placeholder="提示信息"></Input>
            </FormItem>
            <h3>使用vue中ref属性绑定当前的dom节点</h3>
            <h3>使用vue中$refs获取当前节点</h3>
            <h3>使用validate方法验证</h3>
            <Row>
                <Col span="11">
                <FormItem label="标题头" prop="date">
                    <DatePicker type="date" format="yyyy-MM-dd" placeholder="Select date"
                                v-model="formData.date">
                    </DatePicker>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="11">
                <FormItem label="标题头" prop="file">
                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button icon="ios-cloud-upload-outline">Upload files</Button>
                    </Upload>
                </FormItem>
                </Col>
            </Row>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            </FormItem>
        </Form>
        <Button type="primary" @click="jump('abc')">跳转到selectDmeo</Button>
    </div>
</template>
<script>
export default {
    name: "FormDemo",
    data() {
        return {
            formDataDemo: { name: '' },
            formData: {
                name: '',
                date: ''
            },
            validate: {
                // 完整的验证规则请参照开源项目 async-validator
                name: { required: true, message: '提示信息', trigger: 'change' },
                // async-validator框架默认是字符串切必须是字符串
                // 日期验证必须加验证类型
                date: { type: 'date', required: true, message: '提示信息', trigger: 'change' },
                // name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } 
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$Message.success(this.formData.date + '');
                } else {
                    this.$Message.error('Fail!');
                }
            })
            // 清空函数要写在validate函数外面
            // 不然验证会再次触发
            this.$refs[name].resetFields()
        },
        jump(id) {
            this.$router.push('/select-box')
            this.$store.commit('setMxid', 12)
        }
    }
}
</script>

<style lang="less" scoped>
</style>